import { useState } from 'react';
import ExpensiveCpn from './ExpensiveCpn'

function Child() {
  console.log('我不想重新渲染')
  
  return (
    <div>我不想重新渲染</div>
  )
}

// 基于 Demo01 进行优化，将变化的部分单独抽离成为一个组件
function Input() {
  const [number, setNumber] = useState(0)
  
  return (
    <>
      <input type="button" value={number} onClick={(e) => setNumber(number + 1)} />
      <p>number is {number}</p>
    </>
  )
}

export default function Demo02() {
  return (
    <div>
      <Input />
      <Child />
    </div>
  )
}